import React from 'react';
import { message, Checkbox , Button, InputNumber,Input, Form, Icon, Switch } from 'antd';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
import { changePage,_validate } from '../store/actions';
const tempData = {
        id:'role_id_01',
        name:'超级管理员',
        code:'R001',
        desc:'角色描述',
        actions:[
            'action_id_01',
            'action_id_02',
            'action_id_04'
        ],
        status:1
    },
    tempActionData = [
        {
            id:'action_id_01',
            code:'A001',
            name:'权限名称1',
            desc:'权限1描述',
            status:1
        },
        {
            id:'action_id_02',
            code:'A002',
            name:'权限名称2',
            desc:'权限2描述',
            status:1
        },
        {
            id:'action_id_03',
            code:'A003',
            name:'权限名称3',
            desc:'权限3描述',
            status:1
        },
        {
            id:'action_id_04',
            code:'A004',
            name:'权限名称4',
            desc:'权限4描述',
            status:0
        }
    ];
class FormEditRole extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.resetFields = this.resetFields.bind(this);
    }
    resetFields(){
        this.props.form.resetFields()
    }
    static contextTypes = {
        router:React.PropTypes.object
    };
    handleSubmit(e) {
        e.preventDefault();
        const _this = this;
        _validate(e,_this,function(data){
            if(data.status){
                data.status = 1
            }else{
                data.status = 0
            }
            console.log(data)
        })
    }
    componentWillMount(){
        const {setFieldsValue} = this.props.form;
        if(this.props.id){
            setFieldsValue(tempData)
        }else{
            setFieldsValue()
        }
    }
    onChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    onSwitch(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    render() {
        const { getFieldProps } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 }
        };
        if(this.state.roleFetch){
            return (<div>loading...</div>)
        }else{
            const roleName = getFieldProps('name', {
                rules: [
                    { required: true, message: '请输入角色名称'}
                ]
            });
            const roleCode = getFieldProps('code', {
                rules: [
                    { required: true, message: '请输入角色编码'}
                ]
            });
            const roleDesc = getFieldProps('desc', {
                rules: [
                    { required: true, message: '请输入角色描述'}
                ]
            });
            const roleActions = getFieldProps('actions', {
                rules: [
                    { required: true,type:'array', message: '请勾选角色权限'}
                ],
                onChange: this.onChange.bind(this)
            }),
                roleOptions = [
                    {
                        label:'权限1',
                        value:'action_id_01'
                    },{
                        label:'权限2',
                        value:'action_id_02'
                    },{
                        label:'权限3',
                        value:'action_id_03'
                    },{
                        label:'权限4',
                        value:'action_id_04'
                    }
                ];
            const roleStatus = getFieldProps('status',{
                onChange: this.onSwitch.bind(this)
            });
            return (

                <Form horizontal form={this.props.form}>
                    <FormItem
                        {...formItemLayout}
                        label="角色名称"
                    >
                        <Input {...roleName} />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="角色编码"
                    >
                        <Input {...roleCode} />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="角色权限"
                    >
                        <CheckboxGroup {...roleActions} options={roleOptions} />


                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="角色描述"
                    >
                        <Input type="textarea" {...roleDesc} />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="角色状态"
                    >
                        <Switch {...roleStatus} />
                    </FormItem>
                    {(this.state.showBtn!=false)?(<FormItem wrapperCol={{ span: 16, offset: 6 }}>
                        <Button type="primary" onClick={this.handleSubmit}>保存</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <Button type="light" onClick={function(){
                                this.context.router.goBack(-1)
                            }.bind(this)}>取消</Button>
                    </FormItem>):''}
                </Form>

            )


        }
    }

}

export default FormEditRole = Form.create()(FormEditRole);